<div id="app" v-cloak style="height: calc(100vh - 200px)">
    <div class="flex-row seach-class">
        <div>
            <el-button type="primary" @click="addAddon" color="#626aef">新增插件</el-button>
        </div>
        <div>
            <el-upload
                    class="upload-demo"
                    :action="uploadurl"
                    :on-success="handleAvatarSuccess"
                    :file-list="[]"
            >
                <el-button type="danger">本地安装</el-button>
            </el-upload>
        </div>
        <div>
            <el-button type="plain" @click="handleRefresh">
                <el-icon><Refresh /></el-icon>
            </el-button>
        </div>

    </div>
    <el-table :data="dataObj.rows" style="width: 100%"
              :show-overflow-tooltip="true"
              :height="height?height:600"
              @selection-change="$event=>handleSelectionChange($event,pk?pk:`id`)"
    >
        <el-table-column prop="name" label="标识" >
        </el-table-column>
        <el-table-column prop="title" label="标题" >
        </el-table-column>
        <el-table-column prop="intro" label="介绍" >
        </el-table-column>
        <el-table-column prop="state" label="状态" >
            <template #default="scope">
                <el-switch
                        v-model="scope.row.state"
                        class="ml-2"
                        active-value="1"
                        inactive-value="0"
                        @change="e=>handleChange(e,scope.row)"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />

            </template>
        </el-table-column>
        <el-table-column prop="version" label="版本号" >
        </el-table-column>
        <el-table-column prop="require" label="依赖模块" >
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right" align="center">
            <template #default="scope">
                <el-button type="primary" color="#626aef" size="small" @click="addConfig(scope.row)">配置</el-button>
                <el-button v-if="scope.row.state!=1" type="danger" size="small" @click="uninstall(scope.row)">卸载</el-button>
                <el-button v-if="scope.row.state!=1" type="primary" size="small" @click="packAddons(scope.row)" color="#626aef">打包插件</el-button>
<!--                <el-button v-if="select!=1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <div class="flex-row flex-content-end" style="margin-top: 20px">
        <el-pagination
                :hide-on-single-page="1"
                :current-page="dataObj.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="dataObj.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataObj.total"
                prev-text="上一页"
                next-text="下一页"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>
<style>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
    .upload-demo{
        margin-left: 10px;
    }
</style>